class Component {
    constructor(id, opts = { name, data: [] }) {
        this.container = document.getElementById(id);
        this.options = opts;
        this.container.innerHTML = this.render(opts.data);
    }
    registerPlugins(...plugins) {
        plugins.forEach(plugin => {
            const pluginContainer = document.createElement('div');
            pluginContainer.className = `${this.name}__plugin`;
            pluginContainer.innerHTML = plugin.render(this);
            this.container.appendChild(pluginContainer);
            plugin.action(this)
        });
    }
    render(component) {
        // 抽象
        return "";
    }
}
class Slider extends Component {
    constructor(id, opts = { name: "slider-list", data: [], cycle: 3000 }) {
        super(id, opts);
        this.items = this.container.querySelectorAll(".slider-list__item,.slider-list__item--selected");
        this.cycle = opts.cycle || 3000;
        this.sliderTo(0);
    }
    render(data) {
        const content = data.map(image => `
            <li class="slider-list__item">
                <img src="${image}">
            </li>
        `.trim())
        return `
        <ul>${content.join("")}</ul>
        `
    }
    getSelectedItem() {
        const select = this.container.querySelector(".slider-list__item--selected");
        return select;
    }
    getSelectedItemIndex() {
        return Array.from(this.items).indexOf(this.getSelectedItem());
    }
    sliderTo(index) {
        const select = this.getSelectedItem();
        if (select) {
            select.className = "slider-list__item";
        }
        const item = this.items[index];
        if (item) {
            this.items[index].className = "slider-list__item--selected";
        }
        const detail = { index: index }
        const event = new CustomEvent("slide", { bubbles: true, detail })
        this.container.dispatchEvent(event);
    }
    sliderNext() {
        const index = this.getSelectedItemIndex();
        const nextIndex = (index + 1) % this.items.length;
        this.sliderTo(nextIndex);
    }
    sliderPrevious() {
        const index = this.getSelectedItemIndex();
        const previousIndex = (index + this.items.length - 1) % this.items.length;
        this.sliderTo(previousIndex);
    }
    start() {
        this.stop();
        this._timer = setInterval(() => {
            this.sliderNext();
        }, this.cycle)
    }
    stop() {
        clearInterval(this._timer);
    }
}

const pluginPrevious = {
    render() {
        return `<a class="slider-list__previous">&lt;</a>`;
    },
    action(slider) {
        // 向前翻
        const previous = slider.container.querySelector(".slider-list__previous");
        if (previous) {
            previous.addEventListener('click', evt => {
                slider.stop();
                slider.sliderPrevious();
                slider.start();
                evt.preventDefault();
            })
        }
    }
}

const pluginNext = {
    render() {
        return `<a class="slider-list__next">&gt;</a>`;
    },
    action(slider) {
        // 向后翻
        const next = slider.container.querySelector(".slider-list__next");
        if (next) {
            next.addEventListener('click', evt => {
                slider.stop();
                slider.sliderNext();
                slider.start();
                evt.preventDefault();
            })
        }
    }
}

const pluginController = {
    render(slider) {
        const controller = slider.options.data.map((image, index) => {
            if (slider.getSelectedItemIndex() == index) {
                return `
                        <span class="slider-list__control-buttons--selected"></span>
                    `.trim();
            } else {
                return `
                        <span class="slider-list__control-buttons"></span>
                    `.trim();
            }
        })
        return `<div class="slider-list__control">${controller.join("")}</div>`;
    },
    action(slider) {

        // 控制点
        const controller = slider.container.querySelector(".slider-list__control");
        if (controller) {
            const buttons = controller.querySelectorAll('.slider-list__control-buttons,.slider-list__control-buttons--selected');
            controller.addEventListener("mouseover", evt => {
                const idx = Array.from(buttons).indexOf(evt.target);
                if (idx >= 0) {
                    slider.sliderTo(idx);
                    slider.stop();
                }
            })
            controller.addEventListener('mouseout', evt => {
                slider.start();
            })
            slider.container.addEventListener('slide', evt => {
                const idx = evt.detail.index;
                const selected = controller.querySelector('.slider-list__control-buttons--selected');
                if (selected) {
                    selected.className = "slider-list__control-buttons";
                }
                buttons[idx].className = "slider-list__control-buttons--selected";
            })
        }
    }
}
const images = [
    "https://img12.360buyimg.com/pop/s590x470_jfs/t1/200666/3/2407/80779/611cbdbfE67561765/802cf07557ad00c6.jpg.webp",
    "https://imgcps.jd.com/ling4/100009077475/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6e0/0f1863cd/cr/s/q.jpg",
    "https://img13.360buyimg.com/pop/s590x470_jfs/t1/204538/27/418/100695/6110eb81E40c33891/98a22a2cf9021e4e.jpg.webp",
    "https://img10.360buyimg.com/pop/s590x470_jfs/t1/184419/8/18902/98852/6114bd1bEa22d6dbb/1cfa09c57dbf3817.jpg.webp"
]
const slider = new Slider("my-slider", { data: images, cycle: 2000 });
slider.registerPlugins(pluginController, pluginPrevious, pluginNext)
slider.start();